<!--
 * @FilePath     : /layui/demo/1547.html
 * @Description  : 监听 + 动态赋值
 * @Date         : 2025-02-24 13:26
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-24 13:43
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div id="demo1" class="xm-select-demo"></div>

    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      var demo1 = xmSelect.render({
        el: '.xm-select-demo',
        data: [
          { name: '北京', value: 1, mutex: 1, selected: true },
          { name: '上海', value: 2, mutex: 1 },
          { name: '广州', value: 3 },
        ],

        // 1、on 配置的回调中实现；
        on: function ({ arr, change, isAdd }) {
          // 2、参数对象解构的数据；
          console.log(1, arr)
          console.log(2, isAdd)

          if (isAdd) {
            const item = change[0]
            /*
            3、
            找 当前以选中项数据中，
            子项 mutex 字段相等时； 且 子项 value 字段值不等时的数据；（表现为 北京选中，找到 arr 中上海选中的下标；反之也是）
            */
            const index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value)
            console.log('序号', index)
            // 4、找到后，就把它摘掉
            if (index != -1) {
              arr.splice(index, 1) // 移除元素，添加新元素，修改原数组，返回新元素
            }
          }
          return arr // 5、这里 return （可能）变化后的数据，来自定义选项返回
        },
      })
    </script>
  </body>
</html>
